Работы учеников (портфолио)

Назад к списку группИнструкции

Андреева Мария Викторовна

Текущая папка: port­fo­lio / Занятие 24. SVG

Ошибка. Работа с именем task_01.html уже существует в портфолио в подпапке portfolio/Занятие 3/01_border-radius_background-color_span. В папке port­fo­lio не разрешается публиковать работы с одинаковыми именами.

0010_svg_

SVG-фигуры и трансформации

Писать SVG руками довольно просто. Используем фигуры: rect, poly­gon, cir­cle, ellipse, а также line, poly­line и path. Задаем выбранную фигуру, определяем её размеры и координаты, затем добавляем фон и обводку.

Размеры и координаты задаются для разных фигур по-разному, а вот фон и обводка — одинаковы для всех:
fill — заливка. Можно задать цвет любым способом.
Прозрачность — none или trans­par­ent. Цвет по умолчанию — черный;
stroke — цвет обводки;
stroke-width — толщина обводки, по умолчанию — 1. Без stroke не работает.

2 квадрата

/> <

0025_svg_transform

Обводка, заливка и трансформации

Можно задавать обводку, заливку и трансформации:
<

0030_svg_a

0011_svg_transform

Trans­form

SVG-фигуры можно видоизменять с помощью свойства trans­form.

Возможные значения: trans­late, scale, rotate, skewX, skewY, matrix.

Cir­cle

translate(70)
/>

translate(70 70)
/>

scale(0.8 0.4)
/>

Если координаты центра поворота не заданы, они равны 0 0 — это левый верхний угол SVG-изображения. rotate(45). Можно задать координаты центра поворота: rotate(45 100 100).

rotate(10) scale(0.8 0.4)
/>

skewX(skew-angle)

skewX(10) scale(0.8)
/>

matrix(a b c d e f)

matrix(.3 0 0 .95 55 25)
/> <

0022_svg_defs

Группировка

Тег defs служит библиотекой элементов и эффектов, которые будут использоваться позже. Содержимое тега не отображается на странице.
<

0024_svg_use

Тег use

Тег, позволяющий переиспользовать SVG-элементы. Можно копировать любые элементы внутри одной HTML-страницы. Также можно подключить библиотеку элементов в начале страницы, а затем использовать их в нужных местах.

Положение копии определяется относительно верхнего левого угла фигуры в существующей системе координат. При этом внутри символа своя система координат.

При вставке символа ширина и высота (width и height) определяют не размеры фигуры, а видимую область копии (как у правой фигуры), однако при копировании группы (g) ширина и высота ни на что не влияют. Для изменения размеров копии используйте трансформации. <

0021_svg_group

Группировка

Группе, как и фигурам, можно задавать заливку и рамки.

Стиль будет работать для фигур внутри группы, у которых нет своего стиля:
<

0020_svg_group

Группировка

SVG-фигуры можно группировать, чтобы удобно структурировать файл. Для этих целей существует несколько тегов: g, defs и sym­bol. Элементы, группы элементов и символы можно использовать повторно.

g

Тег g служит для группировки фигур по смыслу, чтобы поддерживать прозрачную структуру документа. Группа элементов может быть использована повторно.
<

0023_svg_symbol

Тег defs

Тег defs служит библиотекой элементов и эффектов, которые будут использоваться позже. Содержимое тега не отображается на странице.
<